<template>
  <div class="register_container">
    <div class="register_msg">用户注册</div>
    <!--登录表单-->
    <el-form class="register_form" ref="registerFormRef" :rules="registerRule" :model="registerForm">
      <el-form-item prop="name">
        <el-input placeholder="请输入姓名" v-model="registerForm.name"  clearable prefix-icon="iconfont icon-a-zidingyirenwu"></el-input>
      </el-form-item>
      <el-form-item prop="sex">
        <el-radio-group v-model="registerForm.sex">
          <el-radio-button label="1">男</el-radio-button>
          <el-radio-button label="0">女</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="birthday">
        <el-date-picker
          v-model="registerForm.birthday"
          type="date"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择您的生日">
        </el-date-picker>
      </el-form-item>
      <el-form-item prop="email">
        <el-input placeholder="请输入邮箱" v-model="registerForm.email" clearable prefix-icon="iconfont icon-xinxi"></el-input>
      </el-form-item>
      <el-form-item prop="phoneNumber">
        <el-input placeholder="请输入电话号码" v-model="registerForm.phoneNumber" clearable prefix-icon="iconfont icon-dianhua"></el-input>
      </el-form-item>
      <el-form-item class="register_btn">
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { Enc } from '../../utils/secret'

export default {
  name: 'Register',
  data () {
    return {
      registerForm: {
        name: '',
        email: '',
        phoneNumber: '',
        sex: '',
        birthday: ''
      },
      registerRule: {
        name: { required: true, message: '请输入姓名', trigger: 'blur' },
        sex: { required: true, message: '请选择性别', trigger: 'blur' },
        birthday: { required: true, message: '请选择生日', trigger: 'blur' },
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 24, message: '长度在 6 到 24 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        phoneNumber: [
          { required: true, message: '请输入电话号码', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur' },
          {
            pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
            message: '请输入正确的手机号码'
          }
        ]
      }
    }
  },
  methods: {
    onSubmit () {
      this.$refs.registerFormRef.validate(async valid => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '注册中',
            customClass: 'iconfont icon-jiazai2',
            background: 'rgba(0, 0, 0, .7)'
          })
          try {
            // 第一步获取密钥:参数加密传输
            const { data: enKey } = await this.$http.post('/ajshow/auth/getEncKey')
            if (!enKey.status) {
              loading.close()
              return this.$message.warning('初始化第一次连接')
            }
            const res = await this.$http.post('/ajshow/auth/register',
              {
                name: Enc(this.registerForm.name, enKey.data),
                sex: this.registerForm.sex,
                birthday: this.registerForm.birthday,
                email: Enc(this.registerForm.email, enKey.data),
                phoneNumber: Enc(this.registerForm.phoneNumber, enKey.data)
              })
            if (res.status === 200) {
              if (res.data.status) {
                this.$message.success('账号信息已发送至你的邮箱请注意查收')
                this.$router.push('/login')
              } else this.$message.warning(res.data.msg ? res.data.msg : '注册异常')
            } else this.$message.error('接口异常')
          } catch (e) {
            this.$message.error(e.toString())
          }
          loading.close()
        } else {
          this.$message.warning('校验失败')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .register_container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .register_msg{
      color: white;
      font-size: 24px;
      padding-bottom: 60px;
    }
    .register_form{
      padding: 50px;
      background-color: rgba(255,255,255,.6);
      .register_btn{
        text-align: center;
      }
    }
  }
</style>
